<template>
	<view class="container">
		<!-- 当前分类标题 -->
		<view class="current-category-header" v-if="currentCategory">
			<text class="section-title">{{ currentCategory }}</text>
			<text class="category-count">共 {{ softwareList.length }} 款软件</text>
		</view>
		<!-- 软件列表 -->
		<scroll-view class="software-list-wrapper" v-if="currentCategory">
			<!-- 加载中状态 -->
			<view v-if="pageInfo.loading && softwareList.length === 0" class="loading-container">
				<text class="loading-text">加载中...</text>
			</view>
			<!-- 错误状态 -->
			<view v-else-if="pageInfo.error" class="error-container">
				<text class="error-text">{{ pageInfo.errorMsg }}</text>
				<button class="retry-button" @click="loadCategoryData">重试</button>
			</view>
			<!-- 空数据状态 -->
			<view v-else-if="!pageInfo.loading && softwareList.length === 0" class="empty-container"
			 style="display: flex;flex-direction: column;align-items: center;">
				<!-- <text class="iconfont icon-kongtai" style="font-size: 60px;color: #EDEFF1;" /> -->
				<image src="/static/empty.png" mode="aspectFit" style="width: 300rpx;height: 300rpx;" />
				<text class="empty-text">暂无软件</text>
			</view>
			<!-- 软件卡片列表 -->
			<view v-else>
				<view class="software-card" v-for="item in softwareList" :key="item.id"
					@click="toDetails(item.id)">
					<image class="software-icon" :src="getFullImageUrl(item.mainImageUrl)" mode="aspectFill"></image>
					<view class="software-info">
						<view class="software-header">
							<text class="software-name">{{ item.title }}</text>
							<view v-if="item.isOfficial" class="official-badge">官方正版</view>
						</view>
						<text class="software-desc">{{ item.description }}</text>
						<view class="software-meta">
							<tui-rate active="#FACC15" :size="15" :current="item.rating" disabled
								:score="item.rating"></tui-rate>
							<text class="meta-text">{{ item.rating }}分</text>
							<text class="meta-text">{{ item.pkgSize }}</text>
							<text class="meta-text">{{ item.dcount }}次下载</text>
						</view>
						<view style="display: flex;flex-direction: row;gap: 16rpx;margin-top: 16rpx;">
							<text v-for="(tag, i) in item.tags.split(',')" :key="i"
								style="padding: 4rpx 16rpx;border-radius: 999rpx;font-size: 12px;"
								:style="randomBgFg()">
								{{ tag }}
							</text>
						</view>
					</view>
				</view>
				<!-- 加载更多提示 -->
				<view class="load-more-tip">
					<text v-if="pageInfo.loading && softwareList.length > 0" class="loading-text">正在加载...</text>
					<text v-else-if="pageInfo.noMore" class="loading-text">没有更多了</text>
				</view>
			</view>

		</scroll-view>
		<!-- 未选择分类提示 -->
		<view v-else class="no-selection">
			<text class="no-selection-text">请选择一个分类查看软件</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import api from '@/utils/api.js'
	import {
		onLoad,
		onShareAppMessage,
		onShareTimeline,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		baseConfig
	} from '@/utils/request.js';


	// --- 状态数据 ---
	const currentCategory = ref(null);
	const softwareList = ref([]);

	// --- 分页相关状态 ---
	const pageInfo = reactive({
		page: 1,
		pageSize: 10,
		loading: false,
		noMore: false,
		error: false,
		errorMsg: ''
	});

	// 定义一个方法来拼接完整的图片URL
	const getFullImageUrl = (url) => {
		if (url == '') {
			return '/static/logo.jpg'
		} else {
			return baseConfig.baseURL + '/api/images/' + url;
		}
	};
	const rand = () => Math.floor(Math.random() * 256)
	const randomBgFg = () => {
		const r = rand()
		const g = rand()
		const b = rand()
		// 感知亮度公式
		const brightness = (r * 299 + g * 587 + b * 114) / 1000
		return {
			backgroundColor: `rgb(${r},${g},${b})`,
			color: brightness > 128 ? '#000' : '#fff'
		}
	}
	// --- 选择分类 ---
	const selectCategory = (category) => {
		currentCategory.value = category;
		// 重置分页
		pageInfo.page = 1;
		pageInfo.noMore = false;
		pageInfo.error = false;
		softwareList.value = [];
		// 加载该分类数据
		loadCategoryData(true);
	};

	// --- 加载分类数据 ---
	const loadCategoryData = async (isReload = false) => {
		if (pageInfo.loading || (pageInfo.noMore && !isReload)) {
			return;
		}

		pageInfo.loading = true;
		pageInfo.error = false;

		try {
			const params = {
				pageNum: pageInfo.page,
				pageSize: pageInfo.pageSize,
				category: currentCategory.value
			};
			// 发起API请求
			const res = await api.app.getListByCategory(params);
			if (res.code && res.code == 200) {
				const newRecords = res.data.records;
				if (isReload) {
					softwareList.value = newRecords;
				} else {
					softwareList.value = softwareList.value.concat(newRecords);
				}
				if (newRecords.length < pageInfo.pageSize) {
					pageInfo.noMore = true;
				} else {
					pageInfo.noMore = false;
				}
			} else {
				softwareList.value = res.data.records || [];
				pageInfo.noMore = true;
			}
		} catch (e) {
			console.error('获取软件列表失败', e);
			pageInfo.error = true;
			pageInfo.errorMsg = '加载失败,请重试';
		} finally {
			pageInfo.loading = false;
		}
	};

	// --- 跳转到详情页 ---
	const toDetails = (id) => {
		uni.navigateTo({
			url: `/pages/detail/detail?id=${id}`
		});
	};

	// 监听页面滚动到底部
	onReachBottom(() => {
		if (!currentCategory.value || pageInfo.noMore) {
			return;
		}
		pageInfo.page++;
		loadCategoryData();
	});

	onLoad(async (options) => {
		currentCategory.value = decodeURIComponent(options.category)
		loadCategoryData()
	})

	// 分享朋友
	onShareAppMessage(() => {
		return {
			title: '软件分类 - 每日学习一款软件',
			path: '/pages/category/category'
		};
	})

	// 分享朋友圈
	onShareTimeline(() => {
		return {
			title: '软件分类 - 每日学习一款软件',
			path: '/pages/category/category'
		};
	})
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #F0F0F0;
	}


	/* 当前分类标题 */
	.current-category-header {
		padding: 30rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.category-count {
		font-size: 28rpx;
		color: #6b7280;
	}

	/* 软件列表 */
	.software-list-wrapper {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.software-card {
		background-color: #ffffff;
		border-radius: 32rpx;
		padding: 30rpx;
		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 24rpx;
		margin-bottom: 20rpx;

	}

	.software-icon {
		width: 96rpx;
		height: 96rpx;
		border-radius: 24rpx;
		flex-shrink: 0;
	}

	.software-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.software-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 20rpx;
	}

	.software-name {
		font-size: 15px;
		font-weight: 600;
		color: #1f2937;
	}

	.official-badge {
		font-size: 12px;
		width: 130rpx;
		height: 35rpx;
		background-color: #4E6EF2;
		text-align: center;
		line-height: 35rpx;
		color: #fff;
		border-radius: 10rpx;
	}

	.software-desc {
		font-size: 28rpx;
		color: #6b7280;
		margin-top: 8rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.software-meta {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10rpx;
		margin-top: 8rpx;
	}

	.meta-text {
		font-size: 12px;
		color: #9ca3af;
		margin-left: 5rpx;
	}

	/* 加载状态 */
	.loading-container,
	.error-container,
	.empty-container {
		padding: 100rpx 30rpx;
		text-align: center;
	}

	.loading-text,
	.error-text,
	.empty-text {
		font-size: 28rpx;
		color: #9ca3af;
	}

	.retry-button {
		margin-top: 30rpx;
		background-color: #4f46e5;
		color: #ffffff;
		padding: 20rpx 40rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
	}

	.retry-button::after {
		border: none;
	}

	.load-more-tip {
		text-align: center;
		padding: 20rpx;
		color: #999;
		font-size: 14px;
	}

	/* 未选择分类提示 */
	.no-selection {
		padding: 200rpx 30rpx;
		text-align: center;
	}

	.no-selection-text {
		font-size: 32rpx;
		color: #9ca3af;
	}
</style>